<template>
  <div class="time-play">
    <a-row class="time-play">
      <a-col :span="16" style="height: 80px">
        <div class="time-main">
          <div class="time-vessel">
            <div class="time-control" :class="playAction" @click="play"></div>
          </div>
          <div class="progress-vessel" ref="progresssVessel">
            <div class="progress-inner" ref="progressInner">
              <div class="progress-content" ref="progressCon" @click="clickProgress">
                <div class="progress-bar" :style="{ width: width + 'px' }">
                  <p class="bigDot">
                    <span class="dot"> </span>
                  </p>
                  <div class="curr-popup">
                    {{ data?.[ind]?.date || data?.[data.length - 1]?.date || '暂无数据' }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="time-unit">月</div>
          <div class="progress-speed">
            <p
              :class="{ active: speedActive === index }"
              v-for="(item, index) in speedConfig"
              :key="index"
              @click="changeSpeed(item.value, index)"
            >
              {{ item.label }}
            </p>
          </div>
        </div>
      </a-col>
      <a-col :span="8" style="height: 80px">
        <div class="select-time">
          <a-range-picker style="width: 360px" mode="month" format="YYYY-MM" @change="ChangeTime" />
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, watch, defineEmits, toRefs, onBeforeUnmount } from 'vue'
import { apiHealth } from '@/api/health'
import { useHealthStore } from '@/store/modules/health'
const healthStore = useHealthStore()
const { timeAxisId } = toRefs(healthStore)
const data = ref()
const translate = ref(0)
const width = ref(0)
const speed = ref(1000)
const playAction = ref('play')
const timer = ref()
const progressCon = ref()
const progresssVessel = ref()
const progressInner = ref()
const speedActive = ref(0)
const ind = ref(0)
const speedConfig = ref([
  {
    label: '1X',
    value: 1000
  },
  {
    label: '2X',
    value: 500
  },
  {
    label: '4X',
    value: 250
  }
])
const emit = defineEmits(['changeDataSource'])
const clickProgress = (e) => {
  stopPlay()
  width.value = e.offsetX
  ind.value = Math.floor(width.value / (progressInner.value.clientWidth / data.value.length))
  emit('changeDataSource', data.value[ind.value].data)
  if (playAction.value === 'pause') {
    startPlay()
  }
}
const play = () => {
  if (data.value.length > 0 && playAction.value === 'play') {
    playAction.value = 'pause'
    if (width.value + 20 >= progressInner.value.clientWidth) {
      initPlay()
    } else {
      startPlay()
    }
  } else {
    playAction.value = 'play'
    stopPlay()
  }
}
const initPlay = () => {
  ind.value = 0
  width.value = 0
  translate.value = 0
  playAction.value === 'pause' && startPlay()
}
const startPlay = () => {
  timer.value = setInterval(() => {
    const itemWidth = progressInner.value.clientWidth / data.value.length
    emit('changeDataSource', data.value[ind.value].data)
    width.value = Math.floor(width.value / itemWidth) * itemWidth + itemWidth
    ind.value++
    if (width.value >= progressInner.value.clientWidth) {
      width.value = progressInner.value.clientWidth
      playAction.value = 'play'
      ind.value = data.value.length - 1
      stopPlay()
    }
  }, speed.value)
}
const stopPlay = () => {
  playAction.value = 'play'
  clearInterval(timer.value)
  timer.value = null
}
const changeSpeed = (data, index) => {
  let flag = false
  if (playAction.value === 'pause') {
    flag = true
  }
  speed.value = data
  speedActive.value = index
  stopPlay()
  if (flag) {
    playAction.value = 'pause'
    startPlay()
  }
}
const ChangeTime = (dateString) => {
  initPlay()
  apiHealth.getTimeAxisData(timeAxisId.value, dateString?.[1], dateString?.[0]).then((res) => {
    if (+res.code === 200) {
      data.value = res.data
    }
  })
}
watch(timeAxisId, () => {
  ChangeTime()
})
onBeforeUnmount(() => {
  clearInterval(timer.value)
  timer.value = null
})
</script>

<style lang="less" scoped>
.time-play {
  width: 100%;
  height: 80px;
  background-color: rgba(11, 48, 71, 0.5);
  border-radius: 5px;
  display: flex;
  .select-time {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .time-main {
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    .progress-vessel {
      flex: 1;
      width: 100%;
      height: 100%;
      position: relative;
      // overflow: hidden;
      .progress-inner {
        position: absolute;
        left: 8px;
        top: 1px;
        width: 100%;
        height: 100%;
        padding-top: 60px;
        // margin: 0 29px;
        box-sizing: border-box;
        .progress-content {
          position: absolute;
          top: 36px;
          width: 100%;
          height: 6px;
          margin: 0 10px;
          background: #2d3d44;
          border-radius: 4px;
          cursor: pointer;
          .progress-bar {
            position: absolute;
            height: 6px;
            border-radius: 4px;
            background: #4ec3f2;
            overflow: visible !important;
            -webkit-transition: width 0.3s;
            -moz-transition: width 0.3s;
            -ms-transition: width 0.3s;
            -o-transition: width 0.3s;
            transition: width 0.3s;
            .bigDot {
              pointer-events: none;
              width: 19px;
              height: 19px;
              background: rgba(89, 91, 146, 0.5);
              border-radius: 10px;
              position: absolute;
              right: -10px;
              bottom: -7px;
              margin: 0;
              text-align: center;
              line-height: 19px;
              .dot {
                display: inline-block;
                width: 9px;
                height: 9px;
                background: #4ec3f2;
                border-radius: 5px;
              }
            }
            .curr-popup {
              position: absolute;
              right: 0;
              bottom: 16px;
              -webkit-transform: translateX(50%);
              -moz-transform: translateX(50%);
              -ms-transform: translateX(50%);
              -o-transform: translateX(50%);
              transform: translateX(50%);
              width: 60px;
              font-size: 12px;
              font-weight: 500;
              line-height: 24px;
              color: #dbdce7;
              background-color: #4ec3f2;
              text-align: center;
              &::after {
                content: '';
                position: absolute;
                left: 22px;
                top: 100%;
                border-top: 8px solid #4ec3f2;
                border-left: 8px solid transparent;
                border-right: 8px solid transparent;
              }
            }
          }
        }
        .progress-time {
          display: flex;
          .time-item {
            width: 100px;
            text-align: center;
            border-left: 1px solid #2d3d44;
            box-sizing: border-box;
            &:last-of-type {
              border-right: 1px solid #2d3d44;
            }
          }
        }
      }
    }
    .time-vessel {
      width: 40px;
      position: relative;
      .time-control {
        position: absolute;
        left: 20px;
        top: 32px;
        width: 16px;
        height: 16px;
        cursor: pointer;
      }
      .play {
        &::after {
          content: '';
          border-left: 13px solid #4ec3f2;
          border-top: 8px solid transparent;
          border-bottom: 8px solid transparent;
          display: inline-block;
        }
      }
      .pause {
        &::after {
          content: '';
          width: 4px;
          height: 18px;
          margin-left: 4px;
          background-color: #4ec3f2;
          display: inline-block;
        }
        &::before {
          content: '';
          width: 4px;
          height: 18px;
          background-color: #4ec3f2;
          display: inline-block;
        }
      }
    }
    .time-unit {
      width: 40px;
      height: 80px;
      line-height: 80px;
      text-align: end;
      font-weight: 500;
      color: #4ec3f2;
    }
    .progress-speed {
      width: 100px;
      display: flex;
      align-items: center;
      p {
        flex: 1;
        cursor: pointer;
        text-align: center;
      }
      .active {
        color: #4ec3f2;
      }
    }
  }
}
</style>
